<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view class="userinfo-card">
      <view class="card-box">
        <view class="user-section">
          <view class="avatar-wrap">
            <image
              class="avatar"
              :src="head"
              mode=""
            ></image>
          </view>
          <view class="portrait-box">
            <view class="info-box">
              <text class="username"></text>
            </view>
            <view class="tuan">
              <view class="ma">{{ $t('bico.W499') }} {{ info.account }}</view>
            </view>
            <view class="tuan">
              <view class="ma">{{ $t('authentication.yao') }} {{ info.inviteCode }}</view>
              <view
                class="fuzi"
                @click="copyHref()"
                >{{ $t('bico.W525') }}</view
              >
            </view>
          </view>
        </view>
        <!-- <view
          class="withdraw-btnm"
          @click="funsItemClick(17)"
          >{{ $t('bico.W526') }}</view
        > -->

        <!-- <view class="balance-card-wrap">
          <view class="balance-card">
            <view class="tit">{{ $t('bico.W527') }}</view>
            <view class="xia">
              <view class="num">
                <text style="font-size: 6vw; position: absolute; top: 10vw; right: 10vw; left: 6vw"
                  >{{ shouyi }}
                  <text style="font-size: 4vw; margin-left: 2vw"> {{ coin }}</text></text
                >
              </view>
            </view>
            <view
              class="tit"
              style="font-size: 3.4vw; position: absolute; top: 20vw; right: 10vw; left: 6vw"
              >{{ $t('bico.W528') }}</view
            >
          </view>
        </view> -->
      </view>
    </view>
    <view class="main">
      <!-- <view
        style="margin-top: 0upx"
        :class="['income-card', 'funs', { darksss: theme == 'dark' }]"
      >
        <view class="tit">
          <text>{{ $t('bico.W529') }}</text>
          <image
            src="../../static/member/right_icon.png"
            mode=""
          ></image>
        </view>
        <view class="show-content">
          <view class="view-category">
            <view class="num"><text style="font-size: 24upx"></text>{{ allDirect }}</view>
            <view class="text">{{ $t('bico.W530') }} {{ coin }}</view>
          </view>
          <view class="line"></view>
          <view class="view-category">
            <view class="num"><text style="font-size: 24upx"></text>{{ directY }}</view>
            <view class="text">{{ $t('bico.W531') }} {{ coin }}</view>
          </view>
          <view class="line"></view>
          <view class="view-category">
            <view class="num"> <text style="font-size: 24upx"></text>{{ directN }}</view>
            <view class="text">{{ $t('bico.W532') }} {{ coin }}</view>
          </view>
        </view>
      </view> -->
      <!-- 我的团队 -->
      <view :class="['income-card', 'funs', { darksss: theme == 'dark' }]">
        <view class="tit">
          <text>{{ $t('bico.W533') }}</text>
          <image
            src="../../static/member/right_icon.png"
            mode=""
          ></image>
        </view>
        <view class="show-content">
          <view class="view-category">
            <view class="num">{{ teamNum }}</view>
            <view class="text">{{ $t('bico.W534') }}</view>
          </view>
          <view class="line"></view>
          <view class="view-category">
            <view class="num">{{ directYNum }}</view>
            <view class="text">{{ $t('bico.W535') }}</view>
          </view>
          <view class="line"></view>
          <view class="view-category">
            <view class="num">{{ directNNum }}</view>
            <view class="text">{{ $t('bico.W536') }}</view>
          </view>
        </view>
      </view>
      <!-- 列表组样式 -->
      <view :class="['tool-card', 'funs', { darksss: theme == 'dark' }]">
        <view
          :class="['tool-item', 'flex', 'listItem', { listItemDark: theme == 'dark' }]"
          @click="funsItemClick(15)"
        >
          <!-- <image src="../../static/member/tuiguang.png" mode="widthFix" class="view-image-left"></image> -->
          <view class="item-right">
            <view class="view-text">{{ $t('bico.W537') }}</view>
            <image
              src="../../static/member/right_icon.png"
              class="view-image-right"
            ></image>
          </view>
        </view>
        <u-line color="#5559691f"></u-line>

        <view
          :class="['tool-item', 'flex', 'listItem', { listItemDark: theme == 'dark' }]"
          @click="funsItemClick(18)"
        >
          <!-- <image src="../../static/member/tuiguang.png" mode="widthFix" class="view-image-left"></image> -->
          <view class="item-right">
            <view class="view-text">{{ $t('bico.W538') }}</view>
            <image
              src="../../static/member/right_icon.png"
              class="view-image-right"
            ></image>
          </view>
        </view>
        <u-line color="#5559691f"></u-line>

        <!-- <view
          :class="['tool-item flex', 'listItem', { listItemDark: theme == 'dark' }]"
          @click="funsItemClick(19)"
        >
          <image
            src="../../static/member/tuiguang.png"
            mode="widthFix"
            class="view-image-left"
          ></image>
          <view class="item-right">
            <view class="view-text">{{ $t('bico.W539') }}</view>
            <image
              src="../../static/member/right_icon.png"
              class="view-image-right"
            ></image>
          </view>
        </view>
        <u-line color="#5559691f"></u-line>
        <view
          :class="['tool-item flex', 'listItem', { listItemDark: theme == 'dark' }]"
          @click="funsItemClick(20)"
        >
          <view class="item-right">
            <view class="view-text">{{ $t('bico.W540') }}</view>
            <image
              src="../../static/member/right_icon.png"
              class="view-image-right"
            ></image>
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>
<script>
import { domain } from '@/common/domain.js';
import { mapState, mapActions, mapGetters } from 'vuex';
import uniPopup from '@/components/uni-popup2.vue';
import {
  commonNewsList,
  commonCarousel,
  huobiTicket,
  info,
  logout,
  earningsInfo,
  teamDetail,
  myearnings
} from '../../common/apiString.js';
export default {
  components: {
    uniPopup
  },
  data() {
    return {
      teamNum: 10,
      directYNum: 5,
      directNNum: 5,
      shouyi: 0,
      coin: 'U',
      allDirect: 3000,
      directY: 1500,
      directN: 1500,
      isFinger: '0',
      token: '',
      info: '',
      fingerBool: 0,
      faceBool: 0,
      head: '../../static/rvm.png'
    };
  },
  filters: {
    toFixed2: function (value, options) {
      value = Number(value);
      return value.toFixed(2);
    }
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onPullDownRefresh() {
    this.getUserInfo();
  },
  onLoad() {
    if (uni.getStorageSync('token') && !uni.getStorageSync('isFinger')) {
      this.isFinger = uni.getStorageSync('fingerBool');
      if (this.isFinger) {
        uni.hideTabBar();
      }
    }
    uni.setNavigationBarTitle({
      title: this.$t('bico.W533')
    });
  },
  onShow() {
    this.fingerBool = uni.getStorageSync('fingerBool');
    this.changeFooter();
    this.getUserInfo();
    this.getEarningsInfo();
    this.getmyTeam();
    this.getEarning();
    this.token = uni.getStorageSync('token');
    this.$utils.setTheme(this.theme);
  },
  methods: {
    copyHref() {
      uni.setClipboardData({
        data: this.info.inviteCode,
        success: function () {
          that.$utils.showLayer(that.$t('assets.copy_success'));
        },
        fail: function () {
          that.$utils.showLayer(that.$t('assets.copy_err'));
        }
      });
    },
    //路由开始

    funsItemClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: '/pages/neWs/neWs' //公告
        });
      }
      if (index == 2) {
        uni.navigateTo({
          url: '/pages/mine/security' //安全中心
        });
      }
      if (index == 3) {
        uni.navigateTo({
          url: '/pages/assets/charge' //冲币
        });
      }
      if (index == 4) {
        uni.navigateTo({
          url: '/pages/assets/mention' //提币
        });
      }

      if (index == 5) {
        uni.switchTab({
          url: '/pages/assets/assets'
        });
      }

      if (index == 6) {
        uni.navigateTo({
          url: '/pages/mine/userCenter' //身份认证
        });
      }

      if (index == 7) {
        uni.navigateTo({
          url: '/pages/mine/lang' //语言选择
        });
      }

      if (index == 8) {
        uni.navigateTo({
          url: '/pages/mine/lang' //在线客服
        });
      }

      if (index == 9) {
        // #ifdef APP
        //移动端
        this.$utils.openoutherurl('https://t.me/aes_exchange');
        // #endif
        //#ifdef H5
        //window.open("https://t.me/aes_exchange", '_blank');
        this.$utils.openoutherurl('https://t.me/aes_exchange');

        //#endif
        /*uni.navigateTo({
							url:'/pages/telegram/telegram'//官方社区
						})*/
      }

      if (index == 20) {
        uni.navigateTo({
          url: '/pages/member/huaz' //收益划转记录
        });
      }
      if (index == 19) {
        uni.navigateTo({
          url: '/pages/member/shou' //收益记录
        });
      }
      if (index == 18) {
        uni.navigateTo({
          url: '/pages/member/memberuser' //团队明细
        });
      }
      if (index == 17) {
        uni.navigateTo({
          url: '/pages/member/chege' //划转到钱包
        });
      }
      if (index == 16) {
        uni.navigateTo({
          url: '/pages/member/member' //我的团队
        });
      }
      if (index == 15) {
        uni.navigateTo({
          url: '/pages/share/share' //邀请好友
        });
      }
      if (index == 14) {
        uni.navigateTo({
          url: '/pages/version/version' //应用版本
        });
      }
      if (index == 13) {
        uni.navigateTo({
          url: '/pages/mairivacy/mairivacy' //服务条款
        });
      }
      if (index == 12) {
        uni.navigateTo({
          url: '/pages/contact/contact' //帮助中心
        });
      }
      if (index == 11) {
        uni.navigateTo({
          url: '/pages/privacy/privacy' //隐私政策
        });
      }
      if (index == 10) {
        uni.navigateTo({
          url: '/pages/Whiteskin/Whiteskin' //白皮书
        });
      }
    },

    //路由结束

    fingerFuc() {
      var that = this;
      if ('Android' == plus.os.name) {
        this.type = 'fingerAlert'; //兼容Android平台
      }
      if (plus.fingerprint.isSupport()) {
        if (!plus.fingerprint.isEnrolledFingerprints()) {
          plus.nativeUI.toast('当前设备未录入指纹！');
        }
        plus.fingerprint.authenticate(
          function (e) {
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
            }
            uni.setStorageSync('isFinger', true);
            that.isFinger = 0;
            uni.showTabBar();
          },
          function (e) {
            plus.nativeUI.toast('指纹匹配失败');
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
              plus.fingerprint.cancel();
            }
          },
          {
            message: '授权登录'
          }
        );
      } else {
        plus.nativeUI.toast('此设备不支持指纹设置！');
      }
    },
    fingerCancel() {
      this.type = '';
      plus.fingerprint.cancel();
    },
    changeFooter() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('market.home')
      });
      uni.setTabBarItem({
        index: 1,
        text: this.$t('market.market')
      });
      uni.setTabBarItem({
        index: 2,
        text: this.$t('trade.bibi')
      });
      uni.setTabBarItem({
        index: 3,
        text: this.$t('assets.lever')
      });
      // uni.setTabBarItem({
      //   index: 4,
      //   text: this.$t('assets.lever3')
      // });
      uni.setTabBarItem({
        index: 5,
        text: this.$t('bico.W502')
      });
    },
    // 开启面部识别
    switchChangeFace() {
      var that = this;
      // console.log(that.faceBool);
      if (that.faceBool == 0) {
        that.faceBool = 1;
      } else {
        that.faceBool = 0;
      }
    },
    // 开启指纹识别
    switchChangeFinger() {
      var that = this;
      // console.log(that.fingerBool);
      if (that.fingerBool == 0) {
        that.fingerBool = 1;
      } else {
        that.fingerBool = 0;
      }
      if (plus.fingerprint.isSupport()) {
        if (!plus.fingerprint.isEnrolledFingerprints()) {
          plus.nativeUI.toast('当前设备未录入指纹！');
          if (that.fingerBool == 0) {
            that.fingerBool = 1;
          } else {
            that.fingerBool = 0;
          }
        }
        if ('Android' == plus.os.name) {
          plus.nativeUI.showWaiting('指纹匹配中...');
        }
        plus.fingerprint.authenticate(
          function (e) {
            if ('Android' == plus.os.name) {
              plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
            }
            plus.nativeUI.toast('指纹匹配成功');
            // console.log(that.fingerBool);
            uni.setStorageSync('fingerBool', that.fingerBool);
          },
          function (e) {
            if ('Android' == plus.os.name) {
              plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
              plus.fingerprint.cancel();
            }
            plus.nativeUI.toast('指纹匹配失败');
            // console.log(that.fingerBool);
            if (that.fingerBool == 0) {
              that.fingerBool = 1;
            } else {
              that.fingerBool = 0;
            }
          },
          {
            message: '指纹授权登录'
          }
        );
      } else {
        plus.nativeUI.toast('此设备不支持指纹设置！');
        if (that.fingerBool == 0) {
          that.fingerBool = 1;
        } else {
          that.fingerBool = 0;
        }
      }
      // this.fingerBool = e.target.value
      // uni.setStorageSync('fingerBool',e.target.value)
    },
    // 切换夜间模式
    switchChange(e) {
      // console.log(e.target.value);
      var ui = this.theme == 'light' ? 'dark' : 'light';
      uni.setStorageSync('theme', ui);
      this.$store.dispatch('changeTheme', ui);
      this.$utils.setTheme(ui);
      if (ui == 'dark') {
        uni.setTabBarStyle({
          color: '#a2a6a5',
          selectedColor: '#1881d2',
          backgroundColor: '#0f1a2d',
          borderStyle: 'black'
        });
      } else {
        uni.setTabBarStyle({
          color: '#8b97a0',
          selectedColor: '#238ee1',
          backgroundColor: '#ffffff',
          borderStyle: 'white'
        });
      }
    },
    uploadImg() {
      var that = this;
      uni.chooseImage({
        count: 1,
        // sizeType: ['original', 'compressed'],
        sizeType: ['compressed'],
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: '/api/upload', //仅为示例，非真实的接口地址
            // #ifdef APP-PLUS
            url: domain + '/api/upload',
            // #endif
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success: uploadFileRes => {
              // console.log(typeof uploadFileRes.data);
              var data = JSON.parse(uploadFileRes.data);
              if (data.type == 'ok') {
                let head = data.message;
                // console.log(head);
                that.uphead(head);
              }
            }
          });
        }
      });
    },
    uphead(head) {
      let that = this;
      this.$utils.initDataToken(
        { url: 'user/head_pic', data: { head_portrait: head }, type: 'post' },
        (res, msg) => {
          that.head = head;
        }
      );
    },
    //获取用户信息
    getUserInfo() {
      var that = this;
      this.$utils.initDataToken({ url: info, data: {}, type: 'POST' }, (res, msg) => {
        uni.setStorageSync('uid', msg.id);
        that.info = res;
        if (res.head_portrait) {
          that.head = res.head_portrait;
        }
        try {
          uni.stopPullDownRefresh();
        } catch (e) {}
      });
    },
    getEarningsInfo() {
      var that = this;
      this.$utils.initDataToken({ url: earningsInfo, data: {}, type: 'POST' }, (res, msg) => {
        that.allDirect = res.all;
        that.directY = res.directY;
        that.directN = res.directN;
        that.coin = res.type;
      });
    },
    getEarning() {
      var that = this;
      this.$utils.initDataToken({ url: myearnings, data: {}, type: 'POST' }, (res, msg) => {
        that.shouyi = res == '' ? 0 : res.usedPrice;
      });
    },
    getmyTeam() {
      var that = this;
      that.$utils.initDataToken(
        { url: teamDetail, data: { size: 10000 }, type: 'POST' },
        (res, msg) => {
          that.directNNum = 0;
          that.directYNum = 0;
          var list = res.records;
          that.teamNum = list.length;
          list.forEach(item => {
            // var a=item.parentRefereeId.split("/")
            if (item.class == 1) {
              that.directYNum = that.directYNum + 1;
            } else {
              that.directNNum = that.directNNum + 1;
            }
          });
        }
      );
    },
    //退出登录
    logout() {
      this.$utils.initDataToken({ url: logout, data: {}, type: 'POST' }, (res, msg) => {
        this.$utils.clearStorageSync();

        setTimeout(() => {
          this.$utils.showLayer(msg);
        }, 100);
        uni.redirectTo({
          url: '/pages/login/login'
        });
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.avatar {
  background: #ffffff0a;
  border-radius: 50%;
  width: 16vw;
  height: 16vw;
  overflow: hidden;
  border: 1vw solid #ffffff14;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.container {
  width: 100%;
  height: 100%;
  .userinfo-card {
    .withdraw-btnm {
      width: 75px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #3f51b5;
      font-size: 12px;

      font-weight: 500;
      color: #fff;
      border-radius: 5px;
      position: absolute;
      top: 8vw;
      right: 0;
      left: 77vw;
    }
    .card-box {
      width: 100%;
      //   height: 400upx;
      height: 200upx;
      position: relative;
      z-index: 0;

      .user-section {
        position: absolute;
        top: 0;
        z-index: 10;
        width: 67%;
        padding: 50upx 30upx 210upx;
        display: flex;

        .avatar-wrap {
          width: 100upx;
          height: 100upx;
          border-radius: 50%;
          overflow: hidden;
          position: relative;
          top: 1.2vw;

          .avatar {
            width: 100%;
            height: 100%;
          }
        }

        .portrait-box {
          margin-left: 18upx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .info-box {
            font-size: 38upx;

            font-weight: bold;
            color: #333;
          }

          .tuan {
            display: flex;
            align-items: center;

            .ma {
              font-size: 3.6vw;

              font-weight: 600;
            }

            .fuzi {
              width: 64upx;
              height: 34upx;
              background: #cccccc;
              border-radius: 15upx;
              font-size: 20upx;

              font-weight: 500;

              text-align: center;
              line-height: 34upx;
              margin-left: 10upx;
            }
          }
        }
      }
      .balance-card-wrap {
        width: 100%;
        height: 200upx;
        padding: 0 20upx;
        position: absolute;
        bottom: 0;
        z-index: 10;
        .balance-card {
          width: 100%;
          height: 200upx;
          background: linear-gradient(135deg, #3e38ec 30%, #3f51b5 80%);
          background-image: url(../../static/member/memberbg.png);
          background-position: 0% 0%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 20upx;
          padding: 30upx;

          .tit {
            font-weight: bold;
            color: #fff;
            font-size: 4.2vw;
            position: absolute;
            top: 3vw;
            right: 10vw;
            left: 6vw;
          }

          .xia {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .num {
              font-size: 70upx;

              font-weight: bold;
              color: #fff;
            }

            .withdraw-btn {
              width: 150upx;
              height: 60upx;
              line-height: 60upx;
              text-align: center;
              background: #d8bd6c;
              font-size: 12px;

              font-weight: 500;
              color: #fff;
              border-radius: 10upx;
            }
          }
        }
      }
    }
  }

  .main {
    padding: 20upx;

    .income-card {
      width: 100%;
      background-color: #fff;
      border-radius: 20upx;
      padding: 30upx;
      margin-top: 20upx;

      .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 3.6vw;
        line-height: 32upx;

        font-weight: bold;

        image {
          width: 10upx;
          height: 21upx;
        }
      }

      .show-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 40upx;

        .view-category {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .num {
            font-size: 3.6vw;

            font-weight: 600;
            position: relative;
            top: -1vw;
          }

          .text {
            font-size: 24upx;

            font-weight: 500;
            color: #999999;
          }
        }

        .line {
          width: 0.2vw;
          height: 65upx;
          background-color: #5559691f;
        }
      }
    }

    .tool-card {
      background-color: #ffffff;
      width: 100%;
      padding: 0 30upx;
      margin-top: 20upx;
      border-radius: 20upx;

      .tool-item {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100upx;
        align-items: center;
        justify-content: space-between;

        .view-image-left {
          width: 44upx;
        }

        .item-right {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .view-text {
            margin-left: 0;
            font-size: 3.4vw;

            font-weight: bold;
          }

          .view-image-right {
            width: 10upx;
            height: 21upx;
          }
        }
      }
    }
  }
}
</style>
